<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{title}}</title>
    <meta name="keywords" content="国内VPS推荐,海外VPS推荐,搬瓦工,VPS,bandwagonhost,搬瓦工优惠码,搬瓦工导购,搬瓦工库存,搬瓦工库存实时监控,搬瓦工库存监控,搬瓦工测评">
    <meta name="description" content="VPS库存监控检测系统是为方便VPS爱好者监控库存而推出，数据实时更新，完全免费。">
    <!-- CSS only -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
</head>

<body>
    <main id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="//vpsand.com" title="{{title}}"><img src="/static/logo.png" style="height:32px;" /></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">

            <li class="nav-item active">
                <a class="nav-link" href="/">Home</a>
            </li>
            <li>
                <a class="nav-link" data-toggle="modal" data-target="#myModal">通知订阅</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="//www.jiloc.com">老季博客</a>
            </li>
            </ul>

            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2 search" type="text" placeholder="Search" aria-label="Search" v-model="search">
            </form>

            {% if user.get_username %}
                <a href="/admin" class="btn btn-info">欢迎：{{user.get_username}} , 后台管理</a>
            {% endif %}

        </div>
    </nav>



    <div class="container-fluid">
        <section class="text-center">
            <h1>{{title}}</h1>
            <p><a href="//www.jiloc.com/go/bwh">搬瓦工</a>优惠码：<code>BWH3HYATVBJW</code> ,
            
        </section>

        <!-- <div class="col-md-3 mb-3">
            <select class="custom-select" id="company" @change="searchData">
                <option value=""> -- </option>
                <template v-for='val in companys'>
                    <option v-bind:value="val">{[val]}</option>
                </template>
            </select>
        </div> -->

        <!-- <div class="col-7">
            <input type="text" class="form-control" placeholder="Search" name="search" @change="searchData">
        </div> -->
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th scope="col" v-for="title in titles">{[title]}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in page_arrs" :key="index" :class=" item.sort > 99 ? 'table-primary' : '' ">
                    <td>{[index+1]}#</td>
                    <td>{[item.company__name]}</td>
                    <td>{[item.dc]}</td>
                    <td>{[item.cpu]}</td>
                    <td>{[item.ram]}</td>
                    <td>{[item.disk]}</td>
                    <td>{[item.bandwidth]}</td>
                    <td>{[item.traffic]}</td>
                    <td>{[item.route]}</td>
                    <td>{[item.ipv4]}</td>
                    <td>{[item.arch]}</td>
                    <td v-html="$options.filters.formatPrice(item)"></td>
                    <td v-html="$options.filters.stockToBuy(item)" ></td>
                </tr>
                </tbody>
            </table>
        </div>

        <nav aria-label="Page navigation">
            <ul class="pagination  justify-content-center">
              <li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="primaryPage"> << </a></li>
              <li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="prePage"> < </a></li>
              <li v-for="index in indexs" :class="current_page == index ? 'page-item active' : 'page-item' "><a class="page-link" href="#"  @click="btnClick(index)">{[ index ]}</a></li>
              <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true">{[current_page]} / {[all]}</a></li>
              <li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="nextPage()"> > </a></li>
              <li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="lastPage"> >> </a></li>
            </ul>
        </nav>

    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModal">通知订阅</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="myform">
                    <div class="form-group">
                        <label for="email" class="col-form-label">邮箱:</label>
                        <input type="email" class="form-control" required id="email">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary saveModal">保存</button>
            </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container text-center" >
            <p>数据最后更新时间：<code>{{update_time}}</code></p>
            <p><a href="https://github.com/qsbaq/vps-stock-monitor">GitHub</a> Author: <a href="//www.jiloc.com">Jerry</a></p>
        </div>
    </footer>

</main>
</body>
<script type="text/javascript">
$(function () {
    var nua = navigator.userAgent
    var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
    if (isAndroid) {
        $('select.form-control').removeClass('form-control').css('width', '100%')
    }

    function isValidEmailAddress(emailAddress) {
        var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        return myreg.test(emailAddress);
    };

    $('.saveModal').click(function(){
        var email = $('#email').val();
        if( isValidEmailAddress(email) == false ){
            alert('邮箱格式错误.');
        }
        $.ajax({ 
            url: "/subscribe", 
            method:'GET',
            data: { email: email },
            dataType:"html",//服务器返回的数据类型
            success: function(data){
                if (data == 1){
                    alert('保存成功.');
                    $('#myModal').modal('toggle');
                }
            }
        });

    });

})



var app = new Vue({
    delimiters:['{[', ']}'],
    el: '#app',
    data: {
        arrs: {},
        list:{{goods|safe}},
        search:'',
        companys:[],
        titles : ['#','服务商','机房',"CPU",'内存','硬盘','带宽','流量','线路','IPV4','架构','价格','库存'],
        currentPage : 1,//当前页号
        pagesize : 24, //每页大小
        all:0,
    },　　
    filters:{
        formatPrice: function(obj){
            $str = '';
            if(obj.annual)
                $str += obj.annual+'/年<br/>';
            if(obj.quarter)
                $str += obj.quarter+'/季<br/>';
            if(obj.month)
                $str += obj.month+'/月<br/>';
            return $str;
        },
        stockToBuy: function(obj){
            if(obj.company__connect_pid){
                url = obj.company__url+obj.pid;
            }else{
                url = obj.company__url;
            }
            sold = '<a href="'+url+'" class="btn btn-primary active" role="button" aria-pressed="true">购买</a>';
            soldout = '<button class="btn btn-secondary" disabled="true">售罄</button>';
            if( (obj.company__need_monitor && obj.stock) ||  ! obj.company__need_monitor )
                return sold;
            else
                return soldout;
            
        }
    },
    created: function () {
        // var self = this;
        // $.ajax({
        //     // url: 'https://vpsdalao.com/api/records?provider=Bandwagon',
        //     url: '/ajax_goods',
        //     type: 'get',
        //     data: {},
        //     dataType: 'json'
        // }).then(function (res) {
        //     // console.log(res.data)
        //     self.items = res.data
        // }).fail(function () {
        //     console.log('失败');
        // })
        this.arrs = this.list;
        let tmp = [];
        this.arrs.map((item)=>{tmp.push(item.company__name)});
        this.companys = new Set(tmp);
    },
    computed:{
        page_arrs(){
            let {currentPage,pagesize,arrs} = this
            this.all = Math.ceil(this.arrs.length/pagesize)
            return arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)
        },
        indexs: function(){
            var left = 1;
            var right = this.all;
            var ar = [];
            if(this.all>= 5){
                if(this.currentPage > 3 && this.currentPage < this.all-2){
                    left = this.currentPage - 2
                    right = this.currentPage + 2
                }else{
                    if(this.currentPage<=3){
                        left = 1
                        right = 5
                    }else{
                        right = this.all
                        left = this.all -4
                    }
                }
            }
            while (left <= right){
                ar.push(left)
                left ++
            }
            return ar
        },
        current_page(){
            return this.currentPage
        }
    },
    methods: {
        searchData(search){
            this.currentPage = 1;
            if( search != '' ){
                this.arrs = this.list.filter(function(item){
                    if ( item.company__name.toLowerCase().includes( search.toLowerCase() )   )
                        return item;
                })
            }else{
                this.arrs = this.list;
            }
        },
        primaryPage(){
            this.currentPage = 1
        },
        prePage(){
            if(this.currentPage == 1){
                return
            }
            this.currentPage = this.currentPage - 1
        },
        nextPage(){
            if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){
                return
            }
            this.currentPage = this.currentPage + 1
        },
        lastPage(){
            this.currentPage = Math.ceil(this.arrs.length/this.pagesize)
        },
        btnClick: function(data){//页码点击事件
            if(data != this.currentPage){
                this.currentPage = data 
            }
        },
    },
    watch:{
        search(search){
            console.log(search);
            this.searchData(search);
        }
    }

})
</script>



<script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?388b65b9ee48795b6ba9a920dab261fa";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
})();
</script>
    
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2387381-25"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-2387381-25');
</script>


</html>